<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>联系</title>
		<link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/lianxi.css"/>
		<script type="text/javascript" src="js/mui.min.js"></script>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-pull-left whiten">
		    	<span class="mui-icon mui-icon-arrowleft"></span>
		   </a>
		   <h1 class="mui-title" style="color: white;">联系人</h1>
		    <a href="#popover" class="mui-pull-right whiten" id="add">
		    	<span class="mui-icon mui-icon-plusempty"></span>
		    </a>
		    <div class="mui-input-row header-one">
	    		<div class="mui-input-row mui-search">
	    	    	<input type="search" id="search" class="mui-input-clear mui-input-speech" placeholder="姓名/首字母">
	    		</div>
	    	</div>
	    </header>
	    <style type="text/css">
		#popover{
			height: 150px;
			width:200px;
		}
		#popover span{
			padding-right: 10px;
		}
		#popover .sao{
			padding-right: 20px;
			font-size: 15px;
		}
		</style>
		<div id="popover" class="mui-popover">
			<div class="mui-scroll-wrapper">
			    <div class="mui-scroll">
				    <ul class="mui-table-view">
				    	<li class="mui-table-view-cell"><a href="#"><span class="mui-icon mui-icon-plus"></span>创建群聊</a></li>
				    	<li class="mui-table-view-cell"><a href="#"><span class="mui-icon mui-icon-personadd"></span>加好友/群</a></li>
				    	<li class="mui-table-view-cell"><a href="#"><sapn class="iconfont icon-saoyisao sao"></sapn>扫一扫</a></li>
				    </ul>
				</div>
			</div>
		</div>
		<div class="mui-content">
		 <div class="mui-slider">
		     <div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
		         <a class="mui-control-item" href="#item1">同部门</a>
		         <a class="mui-control-item" href="#item2">组织</a>
		         <a class="mui-control-item" href="#item3">我的下属</a>
		         <a class="mui-control-item" href="#item4">所有人</a>
		     </div>
		     <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-3"></div>
		     <div class="mui-slider-group">
		        <div id="item1" class="mui-slider-item mui-control-content mui-active">
		        	<ul class="mui-table-view userlist">
								    <li class="mui-table-view-cell mui-media">
								        <a href="javascript:;">
								            <img class="mui-media-object mui-pull-left" src="images/img2.png">
								            <div class="mui-media-body">
								                qiqi
								                <p class="mui-ellipsis">麻烦帮忙转一下文件。。。。</p>
								            </div>
								        </a>
								    </li>
								    <li class="mui-table-view-cell mui-media">
								        <a href="javascript:;">
								            <img class="mui-media-object mui-pull-left" src="images/qihoo.png">
								            <div class="mui-media-body">
								              	  阿六
								                <p class="mui-ellipsis">麻烦帮忙转一下文件。。。。</p>
								            </div>
								        </a>
								    </li>
								    <li class="mui-table-view-cell mui-media">
								        <a href="javascript:;">
								            <img class="mui-media-object mui-pull-left" src="images/timg.jpg">
								            <div class="mui-media-body">
								                阿七
								                <p class="mui-ellipsis">麻烦帮忙转一下文件。。。。</p>
								            </div>
								        </a>
								    </li>
								</ul>	
		            
		         </div>
		         <div id="item2" class="mui-slider-item mui-control-content">
		             <ul class="mui-table-view userlist">
								    <li class="mui-table-view-cell mui-media">
								        <a href="javascript:;">
								            <img class="mui-media-object mui-pull-left" src="images/timg1.jpg">
								            <div class="mui-media-body">
								                		技术组
								                <p class="mui-ellipsis">八点集合开会。。。。</p>
								            </div>
								        </a>
								    </li>
								    <li class="mui-table-view-cell mui-media">
								        <a href="javascript:;">
								            <img class="mui-media-object mui-pull-left" src="images/timg2.jpg">
								            <div class="mui-media-body">
								                后台部门
								                <p class="mui-ellipsis">完善后台搭建。。。。</p>
								            </div>
								        </a>
								    </li>
								    <li class="mui-table-view-cell mui-media">
								        <a href="javascript:;">
								            <img class="mui-media-object mui-pull-left" src="images/timg4.jpg">
								            <div class="mui-media-body">
								                前端页面部门
								                <p class="mui-ellipsis">周日前完成页面布局。。。。</p>
								            </div>
								        </a>
								    </li>
								</ul>	
		         </div>
		         <div id="item3" class="mui-slider-item mui-control-content">
		             <ul class="mui-table-view userlist">
								    <li class="mui-table-view-cell mui-media">
								        <a href="javascript:;">
								            <img class="mui-media-object mui-pull-left" src="images/img2.png">
								            <div class="mui-media-body">
								                吖吖
								                <p class="mui-ellipsis">今天的工作量很多。。。。。</p>
								            </div>
								        </a>
								    </li>
								    <li class="mui-table-view-cell mui-media">
								        <a href="javascript:;">
								            <img class="mui-media-object mui-pull-left" src="images/user-photo.png">
								            <div class="mui-media-body">
								                瓜瓜
								                <p class="mui-ellipsis">要完成前端页面。。。</p>
								            </div>
								        </a>
								    </li>
								    <li class="mui-table-view-cell mui-media">
								        <a href="javascript:;">
								            <img class="mui-media-object mui-pull-left" src="images/timg5.jpg">
								            <div class="mui-media-body">
								                淘淘
								                <p class="mui-ellipsis">下班一起吃饭呀。。。。</p>
								            </div>
								        </a>
								    </li>
								</ul>	
		         </div>
		         <div id="item4" class="mui-slider-item mui-control-content">
		             <ul class="mui-table-view userlist">
								    <li class="mui-table-view-cell mui-media">
								        <a href="javascript:;">
								            <img class="mui-media-object mui-pull-left" src="images/timg.jpg">
								            <div class="mui-media-body">
								           qq
								                <p class="mui-ellipsis">web前端岗位有空缺。。。。</p>
								            </div>
								        </a>
								    </li>
								    <li class="mui-table-view-cell mui-media">
								        <a href="javascript:;">
								            <img class="mui-media-object mui-pull-left" src="images/timg10.jpg">
								            <div class="mui-media-body">
								                木屋
								                <p class="mui-ellipsis">web前端岗位有空缺。。。。</p>
								            </div>
								        </a>
								    </li>
								    <li class="mui-table-view-cell mui-media">
								        <a href="javascript:;">
								            <img class="mui-media-object mui-pull-left" src="images/timg10.jpg">
								            <div class="mui-media-body">
								                CBD
								                <p class="mui-ellipsis">php开发岗位有空缺。。。。</p>
								            </div>
								        </a>
								    </li>
								    <li class="mui-table-view-cell mui-media">
								        <a href="javascript:;">
								            <img class="mui-media-object mui-pull-left" src="images/timg.jpg">
								            <div class="mui-media-body">
								           qq
								                <p class="mui-ellipsis">web前端岗位有空缺。。。。</p>
								            </div>
								        </a>
								    </li>
								    <li class="mui-table-view-cell mui-media">
								        <a href="javascript:;">
								            <img class="mui-media-object mui-pull-left" src="images/timg10.jpg">
								            <div class="mui-media-body">
								                木屋
								                <p class="mui-ellipsis">web前端岗位有空缺。。。。</p>
								            </div>
								        </a>
								    </li>
								    <li class="mui-table-view-cell mui-media">
								        <a href="javascript:;">
								            <img class="mui-media-object mui-pull-left" src="images/timg10.jpg">
								            <div class="mui-media-body">
								                CBD
								                <p class="mui-ellipsis">php开发岗位有空缺。。。。</p>
								            </div>
								        </a>
								    </li>
								</ul>	
		         </div>
		     </div>
		 </div>
	</div>
	</body>
</html>
